<template>
  <div class="header-block">
    <!-- 左边 -->
    <div class="left-blcok">
      <img src="@/assets/photo/logo.png" />
    </div>
    <!-- 右边 -->
    <div class="right-block">
      <span>张三(超级管理员)</span>
      <span>
        <img src="@/assets/photo/gita.gif" />
      </span>
      <span>|</span>
      <span class="quit">
        <a href="#">退出登录</a>
      </span>
      <img class="cn" src="@/assets/photo/cn.png" />
    </div>
  </div>
</template>

<script setup>
// import { ref } from "vue";
// const msg = defineProps({
//   msg: {
//     type: String,
//     required: true,
//   },
//   info: {},
// });

// const input = msg.msg;
// const form = ref("");
</script>

<style scoped lang="scss">
.header-block {
  width: 100%;
  height: 50px;
  background-color: #fff;
  line-height: 50px;
  display: flex;
  justify-content: space-between;
  .left-blcok {
    width: 100px;
    height: 50px;
    display: flex;
    align-items: center;
    margin-left: 15px;
    img {
      width: 100%;
    }
  }
  .right-block {
    width: max-content;
    img {
      height: 25px;
      width: 25px;
      vertical-align: middle;
    }
    span {
      margin-left: 5px;
      font-size: 12px;
      color: #504e4e;
      vertical-align: middle;
    }
    .cn {
      height: 50px;
      width: 50px;
    }
    .quit {
      a {
        color: #60acff;
      }
    }
  }
}
</style>
